<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>涵子易的贪吃蛇</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #main {

            height: 500px;
            width: 360px;
            border: 10px solid #000;
            background-color: #b7d4a8;
            border-radius: 20px;
            margin: 50px auto;
        }

        #stage {
            position: relative;
            width: 304px;
            height: 304px;
            border: 2px solid #000;
            margin: 20px auto;
        }

        #food {
            position: absolute;
            top: 100px;
            left: 120px;
            width: 10px;
            height: 10px;
            background: #000;
            border-radius: 10px;
        }



        #snake>div {
            position: absolute;
            top: 50%;
            left: 50%;
            /* transform: translate(-50%, -50%); 因为js动态给值所以不需要这个*/
            width: 10px;
            height: 10px;
            background-color: #000;
            border: 1px solid #b7d4a8;
        }

        #info {
            width: 304px;
            margin: 20px auto;
            display: flex;
            justify-content: space-between;
            font: bold 20px courier;
        }

        .modal {
            position: absolute;
            display: none;
            text-align: center;
            width: 300px;
            height: 300px;
            background: #fff;

            z-index: 99999;
        }

        .modal p {
            margin-top: 60px;
        }

        .modal button {
            margin-top: 100px;
        }

        .arrow {
            position: relative;
            width: 304px;
            height: 80px;
        }


        .left,
        .right,
        .top,
        .bottom {
            width: 30px;
            height: 30px;
            border-left: 5px solid #fff;
            border-top: 5px solid #fff;
        }

        .left {
            position: absolute;
            left: 35%;
            transform: translateX(-50%);
            transform: rotate(-45deg);
        }

        .right {
            position: absolute;
            left: 65%;
            transform: translateX(-50%);
            transform: rotate(135deg);
        }

        .top {
            position: absolute;
            top: -50%;
            left: 50%;
            transform: translateX(-50%);
            transform: rotate(45deg);
        }

        .bottom {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%);
            transform: rotate(225deg);
        }

        .arrow p {
            position: absolute;
            top: 75%;
            left: 80%;
        }

        .active {
            border-color: #4e6ef2;
        }
    </style>
</head>

<body>
    <div id="main">
        <div id="stage">
            <div class="modal">
                <p> 您撞墙了!请请点击下方按钮重新开始</p>
                <button class="re">重新开始</button>
            </div>
            <div id="snake">
                <div></div>
            </div>

            <div id="food"></div>

        </div>
        <div id="info">
            <div>分数: <span id="score">0</span></div>
            <div>等级: <span id="level">1</span></div>
        </div>
        <div class="arrow">
            <div class="top"></div>
            <div class="left"></div>
            <div class="right"></div>
            <div class="bottom"></div>
            <p>&copy;csh2023</p>
        </div>

    </div>

</body>
<script>

    //元素
    const snake = document.getElementById('snake');
    const snakes = snake.getElementsByTagName('div');
    const food = document.querySelector('#food');
    const modal = document.querySelector('.modal');
    const btn = document.querySelector('.re');
    const score = document.querySelector('#score');
    const level = document.querySelector('#level');

    let arr = ['w', 'W', 's', 'S', 'a', 'A', 'd', 'D'];
    let dir = null;
    let keyflag = true;
    //移动端支持
    const left = document.querySelector('.left');
    const right = document.querySelector('.right');
    const tops = document.querySelector('.top');
    const bottom = document.querySelector('.bottom');

    //随机函数
    function changeFood() {
        let x = Math.floor(30 * Math.random()) * 10
        let y = Math.floor(30 * Math.random()) * 10
        food.style.top = y + 'px';
        food.style.left = x + 'px'
    }

    changeFood();
    let s = 0;
    let lv = 1;
    left.addEventListener('click', function () {
        if (document.querySelector('.active')) document.querySelector('.active').classList.remove('active')
        this.classList.add('active');
        dir = 'a'

    })
    right.addEventListener('click', function () {
        if (document.querySelector('.active')) document.querySelector('.active').classList.remove('active')
        this.classList.add('active');
        dir = 'd';
    })
    tops.addEventListener('click', function () {
        if (document.querySelector('.active')) document.querySelector('.active').classList.remove('active')
        this.classList.add('active');
        dir = 'w';
    })
    bottom.addEventListener('click', function () {
        if (document.querySelector('.active')) document.querySelector('.active').classList.remove('active');
        this.classList.add('active');
        dir = 's';
    })
    document.addEventListener('keydown', e => {
        if (arr.includes(e.key) && keyflag) {
            if (snakes.length < 2) {
                dir = e.key;
                keyflag = false;
            } else {
                if (dir === 'a' && e.key !== 'd') {
                    dir = e.key;
                    console.log(1);
                }
                else if (dir === 'd' && e.key !== 'a') {
                    dir = e.key;
                    console.log(2);
                }
                else if (dir === 'w' && e.key !== 's') {
                    dir = e.key;
                    console.log(3);
                }
                else if (dir === 's' && e.key !== 'w') {
                    dir = e.key;
                    console.log(4);
                }
                else if (dir === 'A' && e.key !== 'D') {
                    dir = e.key;
                    console.log(1);
                }
                else if (dir === 'D' && e.key !== 'A') {
                    dir = e.key;
                    console.log(2);
                }
                else if (dir === 'W' && e.key !== 'S') {
                    dir = e.key;
                    console.log(3);
                }
                else if (dir === 'S' && e.key !== 'W') {
                    dir = e.key;
                    console.log(4);
                }
                // else if (dir === 'a' && e.key !== 'D') {
                //     dir = e.key;
                //     console.log(1);
                // }
                // else if (dir === 'd' && e.key !== 'A') {
                //     dir = e.key;
                //     console.log(2);
                // }
                // else if (dir === 'w' && e.key !== 'S') {
                //     dir = e.key;
                //     console.log(3);
                // }
                // else if (dir === 's' && e.key !== 'W') {
                //     dir = e.key;
                //     console.log(4);
                // }
                // else if (dir === 'A' && e.key !== 'd') {
                //     dir = e.key;
                //     console.log(1);
                // }
                // else if (dir === 'D' && e.key !== 'a') {
                //     dir = e.key;
                //     console.log(2);
                // }
                // else if (dir === 'W' && e.key !== 's') {
                //     dir = e.key;
                //     console.log(3);
                // }
                // else if (dir === 'S' && e.key !== 'w') {
                //     dir = e.key;
                //     console.log(4);
                // }
            }

        }
    })

    setTimeout(function move() {
        const head = snakes[0];
        let x = head.offsetLeft;
        let y = head.offsetTop;

        switch (dir) {
            case 'w':
                y -= 10;
                break;
            case 'W':
                y -= 10;
                break;
            case 's':
                y += 10;
                break;
            case 'S':
                y += 10;
                break;
            case 'a':
                x -= 10;
                break;
            case 'A':
                x -= 10;
                break;
            case 'd':
                x += 10;
                break;
            case 'D':
                x += 10;
                break;
        }

        if (food.offsetLeft == head.offsetLeft && food.offsetTop == head.offsetTop) {
            // 1.改变食物位置
            changeFood();


            //2.增加蛇的身体
            // let div = document.createElement('div');
            // snake.appendChild(div)
            snake.insertAdjacentHTML('beforeend', '<div>')
            //3.增加分数
            s++;
            score.innerHTML = s;

            if (s % 10 == 0 && lv < 10) {
                lv++;
                level.innerHTML = lv;

            }
        }
        if (x < 0 || x > 290 || y < 0 || y > 290) {

            modal.style.display = 'block';
            btn.addEventListener('click', function () {
                location.reload();
            })
            return false;
        }
        for (let i = 0; i < snakes.length - 1; i++) {
            if (snakes[i].offsetLeft === x && snakes[i].offsetTop === y) {
                const p = document.querySelector('.modal p');
                p.innerHTML = '您撞到自己了!请请点击下方按钮重新开始'
                modal.style.display = 'block';
                btn.addEventListener('click', function () {
                    location.reload();
                })
                return false;
            }
        }
        const tail = snakes[snakes.length - 1];
        tail.style.left = x + 'px';
        tail.style.top = y + 'px';

        snake.insertAdjacentElement('afterbegin', tail)
        keyflag = true;
        setTimeout(move, 320 - lv * 30)

    }, 300)

</script>

</html>